<template>
  <div class="registerDivClass">
    <index-header></index-header>
    <el-card
      shadow="always"
      style="
        top: 50px;
        margin: 0 auto;
        width: 29%;
        min-height: 650px;
        position: relative;
      "
    >
      <div style="text-align: center; margin-top: 30px">
        <img
          src="../../assets/jishou.jpg"
          alt="logoImg"
          style="max-width: 90px"
        />
        <h3 style="font-weight: 400; margin-top: 20px">注册</h3>
      </div>

      <div style="text-align: center; margin-left: 10px; margin-top: 50px">
        <el-input
          placeholder="请输入用户名"
          v-model="inputUsername"
          clearable
          show-word-limit
          style="margin-top: 30px"
        >
          <template slot="prepend"
            ><span style="padding-left: 1px; padding-right: 1px"
              >用户名：</span
            ></template
          >
        </el-input>

        <el-input
          placeholder="请输入11位电话号码"
          v-model="inputPhone"
          clearable
          maxlength="11"
          show-word-limit
          style="margin-top: 30px"
        >
          <el-button
            slot="append"
            @click="sendCode()"
            :disabled="codeButtonDisabled"
            >{{ codeContent }}</el-button
          >
          <template slot="prepend"
            ><span style="padding-left: 7.2px; padding-right: 7.2px"
              >电话：</span
            ></template
          >
        </el-input>

        <el-input
          placeholder="请输入验证码"
          v-model="inputCode"
          :disabled="!codeButtonDisabled"
          show-word-limit
          style="margin-top: 30px"
        >
          <template slot="prepend"
            ><span style="padding-left: 1px; padding-right: 1px"
              >验证码：</span
            ></template
          >
        </el-input>

        <el-input
          placeholder="请输入你的密码"
          v-model="inputPassword"
          clearable
          minlength="6"
          show-password
          show-word-limit
          style="margin-top: 30px"
        >
          <template slot="prepend"
            ><span style="padding-left: 7.2px; padding-right: 7.2px"
              >密码：</span
            ></template
          >
        </el-input>

        <el-input
          placeholder="请填写邮箱"
          style="margin-top: 30px"
          v-model="inputEmail"
          maxlength="30"
          show-word-limit
        >
          <template slot="prepend"
            ><span style="padding-left: 7.2px; padding-right: 7.2px"
              >邮箱：</span
            ></template
          >
        </el-input>

        <el-input
          placeholder="请填写校区:广州或三水"
          style="margin-top: 30px"
          v-model="inputAddress"
          maxlength="2"
          show-word-limit
        >
          <template slot="prepend"
            ><span style="padding-left: 7.2px; padding-right: 7.2px"
              >校区：</span
            ></template
          >
        </el-input>

        <el-input
          placeholder="请填写微信号"
          style="margin-top: 30px"
          v-model="inputWeChat"
        >
          <template slot="prepend"
            ><span style="padding-left: 1px; padding-right: 1px"
              >微信号：</span
            ></template
          >
        </el-input>
      </div>

      <div style="text-align: center; margin-left: 10px; margin-top: 50px">
        <el-button
          type="primary"
          style="min-width: 80%"
          @click="register()"
          :disabled="registerButton"
          >注册</el-button
        >
      </div>

      <el-row type="flex" class="row-bg" justify="center" style="top: 10px">
        <el-col :span="24">
          <h6 style="text-align: center; color: #757575">
            广东财经财经大学闲置交易系统 版权所有
          </h6>
          <h6 style="text-align: center; color: #757575">Copyright © 2019</h6>
        </el-col>
      </el-row>
    </el-card>

    <!--      弹出提示框-->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div style="text-align: center">
        <h4>{{ dialogValue }}</h4>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="clickButton"
            style="margin-top: 30px"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import IndexHeader from "./index-header";
export default {
  name: "register",
  data() {
    return {
      inputUsername: "",
      inputPassword: "",
      inputPhone: "",
      inputAddress: "",
      inputEmail: "",
      inputWeChat: "",
      inputSex: "",
      inputCode: "",
      dialogValue: "注册失败",
      centerDialogVisible: false,
      registerButton: true,
      codeContent: "发送验证码",
      totalTime: 60,
      codeButtonDisabled: false,
    };
  },
  components: {
    IndexHeader,
  },
  methods: {
    sendCode() {
      let self = this;
      if (this.codeButtonDisabled) return;
      this.codeButtonDisabled = true;
      this.codeContent = this.totalTime + "s后重新发送";
      let clock = window.setInterval(() => {
        this.totalTime--;
        this.codeContent = this.totalTime + "s后重新发送";
        if (this.totalTime < 0) {
          window.clearInterval(clock);
          this.codeContent = "重新发送验证码";
          this.totalTime = 10;
          this.codeButtonDisabled = false; //这里重新开启
        }
      }, 1000);

      $.ajax({
        type: "GET",
        url: "http://waiterxiaoyy.free.idcfengye.com/web/sendcode",
        data: {
          phone: this.inputPhone,
        },
        dataType: "json",
        contentType: "application/json",
        success: function (data) {
          if (data.code !== 200) {
            self.$message.error(data.msg);
            self.codeContent = "重新发送验证码";
            self.totalTime = 10;

            clearInterval(clock);
          } else if (data.code === 200) {
            self.$message.success(data.msg);
            self.registerButton = false;
          }
        },
      });
    },

    register() {
      let jsonObj = {};
      jsonObj.userName = this.inputUsername;
      jsonObj.password = this.inputPassword;
      jsonObj.userAddress = this.inputAddress;
      jsonObj.userEmail = this.inputEmail;
      jsonObj.userWechat = this.inputWeChat;
      jsonObj.phone = this.inputPhone;
      jsonObj.code = this.inputCode;
      let jsonMsg = JSON.stringify(jsonObj);

      let self = this;

      $.ajax({
        type: "POST",
        url: "http://waiterxiaoyy.free.idcfengye.com/web/register",
        data: jsonMsg,
        dataType: "json",
        contentType: "application/json",
        xhrFields: {
          withCredentials: true,
        },
        crossDomain: true,
        success: function (data) {
          console.log(data);
          if (data.code !== 200) {
            self.$message.error(data.msg);
          } else if (data.code === 200) {
            self.$message.success(data.msg);
            self.$router.push({
              path: "/",
            });
          }
        },
      });
    },

    check() {
      //纯字母数字11位
      // let usernameRex = /^[0-9]*$/;
      let userAddress = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

      if (userAddress.test(this.inputUsername)) return true;
      else {
        self.dialogValue = "邮箱格式不正确";
        return false;
      }
    },

    clickButton() {
      if (this.dialogValue === "注册成功") {
        this.$router.push("/");
      } else {
        this.centerDialogVisible = false;
      }
    },
  },
};
</script>

<style scoped>
.registerDivClass {
  background: url("https://i.loli.net/2019/12/15/A2XS7tNrHCM9f4R.png");
  height: 792px;
}
</style>
